<template>
  <div class="PrivateCourses">
    <!-- 空格 -->
    <div class="kong">&nbsp;</div>
    <!-- 私教首页--场馆预约 -->
    <!-- <div class="title">
      <div class="title2">
        <span><van-icon name="map-marked" />&nbsp;预约场馆</span>
      </div>
      <van-dropdown-menu active-color="#1989fa" icon="../assets/posation.svg" title="预约场馆">
        <van-dropdown-item ico v-model="value" :options="option1" />
      </van-dropdown-menu>
    </div> -->
    <van-cell title="预约场馆" icon="map-marked">
      <van-dropdown-menu active-color="#6b8dcb" icon="../assets/posation.svg" title="预约场馆">
        <van-dropdown-item v-model="value" :options="option" />
      </van-dropdown-menu>
    </van-cell>
    <!-- 可预约课程 -->
    <div class="yyclass">
      <span><van-icon name="smile" />&nbsp;可预约课程</span>
    </div>
    <!-- 课程 -->
    <div class="grid">
      <van-grid :column-num="2">
        <!-- 卡片1 -->
        <router-link v-for="item in classPrList" :key="item.class_id" :to="{ path: `/pt_details/${item.class_id}` }">
          <van-grid-item>
            <div class="card1">
              <div>
                <img :src="item.class_img" alt="" />
              </div>
              <div class="a">
                <span>{{ item.class_name }}</span>
                <p>{{ item.class_coatch }}</p>
                <div class="item">
                  <p>
                    <span>￥{{ item.class_price }}</span>
                    <span style="color: gray">/起</span>
                  </p>
                  <van-button type="primary" size="mini">详情</van-button>
                </div>
              </div>
            </div>
          </van-grid-item>
        </router-link>
      </van-grid>
    </div>
  </div>
</template>
<script>
export default {
  props: ['option1', 'classPrList'],
  data() {
    return {
      value: 1,
      option: this.option1
    }
  },
  methods: {}
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
/* 空格*/
.PrivateCourses > .kong {
  background-color: #eee;
  border: 2px solid #eee;
  line-height: 8px;
  margin-bottom: 1px;
  margin-top: 12px;
}
.PrivateCourses > .title > .title2 {
  margin-left: 10px;
  font-size: 16px;
  font-weight: bold;
}
.PrivateCourses > .yyclass {
  margin-left: 14px;
  font-weight: bold;
  font-size: 16px;
}
.PrivateCourses > .title > .van-dropdown-menu > .van-dropdown-menu__bar > .van-dropdown-menu__item > .van-dropdown-menu__title > .van-ellipsis {
  margin-left: 120px;
}
.van-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.card1 > div > img {
  border-radius: 8px;
  width: 150px;
  height: 130px;
}
.card1 > .a > span {
  font-size: 14px;
  margin: 2px;
  color: #000;
}
.card1 > .a > p {
  color: gray;
  font-size: 14px;
  margin: 2px;
}
.card1 > .a > .item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.card1 > .a > .item > p > :first-child {
  font-family: '微软雅黑 Bold', '微软雅黑';
  font-weight: 700;
  font-size: 14px;
  color: #888;
}
</style>
